<script>
import CommentList from "../../components/comment/CommentList.vue";
import UserCard from "../../components/user/UserCard.vue";
import {detailBlog} from "../../api/blog";
import '../../assets/css/vue.css'
import "highlight.js/styles/atom-one-light.css";
import {mavonEditor} from "mavon-editor";
import hljs from "highlight.js";
import {userDetail} from "../../api/user";

export default {
    name: "ArticleDetail",
    components: {CommentList, UserCard},
    data() {
        return {
            blog: {},
            commentFlag: false,
            htmlContent: '',
            user:{}
        }
    },
    methods: {
        init() {
            var id = this.$route.params['id']
            detailBlog(id)
                .then(res => {
                    if (res.code === 200) {
                        this.blog = res.data;
                        this.render()
                        this.getUser(this.blog.ownerId)
                    }
                })
        },
        render() {
            const md = mavonEditor.getMarkdownIt();
            md.set({
                langPrefix: "hljs language-",
                highlight: (code) => {
                    return hljs.highlightAuto(code).value;
                }
            })
            this.htmlContent = md.render(this.blog.content)
        },
        getUser(id){
            userDetail(id)
            .then(res=>{
                if(res.code===200)
                    this.user=res.data
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<template>
    <div class="flex row center flex-start detailMain">

        <div class="flex column detail-left">
            <div class="content" v-html="htmlContent"></div>
            <el-divider/>
            <CommentList :flag="commentFlag" :id="blog.id" type="blog"/>
        </div>
        <div class="flex column align-center " style="height: 300px;width: 15%;background: white;margin-left: 5px">
            <UserCard :user="user"/>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content:deep(img){
    max-width: 100%;
}
.detailMain {
    margin:1rem 0;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 180px);
}

.detail-left {
    padding: 0 20px;
    width: 50%;
    background: #ffffff;
}
</style>
